<template>
  <tbc-dialog ref="dialog" title="领取列表" basic width="1000px">
    <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
      <template #left>
        <div>
          <el-select placeholder="状态" v-model="status" size="small">
            <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in [
                      {value: 0, label: '全部'},
                      {value: 1, label: '未使用'},
                      {value: 2, label: '已使用'},
                      {value: 3, label: '已过期'}]"
                :key="item.value"></el-option>
          </el-select>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              style="margin-left:10px"
              @click="loadDataList">查询
          </el-button>
        </div>

      </template>
      <template #right>
        <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
      </template>
    </tbc-pagination>
    <div class="data-container">
      <tbc-dynamic-table
          v-loading="loading"
          :data="dataList"
          max-height="400"
          :cols="[
            {label: '优惠券', prop: 'coupon_name', width: 200},
            {label: '领取用户', prop: 'user', width: 200},
            {label: '有效期', prop: 'time', width: 200},
            {label: '使用时间', prop: 'use_time', width: 200},
            {label: '状态', prop: 'status'}
        ]">
        <template #coupon_name="scope">
          <p>{{ scope.row.coupon_name }}</p>
          <p>{{ scope.row.coupon_id }}</p>
        </template>
        <template #user="scope">
          <p>{{ scope.row.user_id }}</p>
          <p>{{ scope.row.nick_name }}</p>
        </template>

        <template #time="scope">
          <p>开始：{{ scope.row.effective_start_time }}</p>
          <p>结束：{{ scope.row.effective_end_time }}</p>
        </template>

        <template #use_time="scope">
          <p v-if="scope.row.order_sn">{{ scope.row.order_sn }}</p>
          <p v-if="!scope.row.order_sn"> - </p>
          <p>{{ scope.row.use_time }}</p>
        </template>

        <template #status="scope">
          <el-tag type="info" v-if="scope.row.status === 1">未使用</el-tag>
          <el-tag type="success" v-if="scope.row.status === 2">已使用</el-tag>
          <el-tag type="danger" v-if="scope.row.status === 3">已过期</el-tag>
        </template>
      </tbc-dynamic-table>
    </div>
    <tbc-pagination :total="total" :config="{page, size}" @change="loadDataList"/>
  </tbc-dialog>
</template>
<script lang="ts">
import {defineComponent, reactive, ref, toRefs, Ref} from 'vue'
import http from '@/plugin/http'
import {ElMessage} from "element-plus";

export default defineComponent({

  name: 'coupon-received',

  setup() {
    const dialog: Ref = ref(null)
    const state = reactive({
      loading: false,
      dataList: [],
      page: 1, size: 10, total: 0,
      keyword: '', status: 0,
      couponId: ''
    })

    const show = (coupon) => {
      state.couponId = coupon.coupon_id
      dialog.value.show()
      loadDataList(1)
    }

    const loadDataList = async (page?: number, size?: number) => {
      state.loading = true;
      if (page) state.page = page;
      if (size) state.size = size;
      const res = await http.get('/coupon/received', {
        coupon_id: state.couponId,
        page,
        size,
        keyword: state.keyword,
        status: state.status,
      })
      state.loading = false;
      if (res.data.code !== 0) return ElMessage.error(res.data.message);
      state.total = res.data.data.total;
      state.dataList = res.data.data.list;
    }

    return {
      ...toRefs(state),
      dialog,
      show, loadDataList
    }
  }
})
</script>